import React, { PureComponent } from 'react'

import CommentInput from './child-cpns/CommentInput'
import CommentItem from './child-cpns/CommentItem'

export default class App extends PureComponent {
  constructor() {
    super() 
    
    this.state = {
      commentList: []
    }
  }
  render() {
    return (
      <div style={{width: '550px',padding: '20px'}}>
        {
          this.state.commentList.map((item, index) => {
            return <CommentItem 
                      key={item.id} 
                      commentItem={item}
                      removeItemChange={e => this.removeItemChange(index)} 
                    />
          })
        }
        <CommentInput commentChange={info => this.commentChange(info)} />
      </div>
    )
  }

  commentChange(info) {
    this.setState({
      commentList: [...this.state.commentList, info]
    })
  }

  removeItemChange(index) {
    const newCommentList = [...this.state.commentList]
    newCommentList.splice(index, 1)
    
    this.setState({
      commentList: newCommentList
    })
  }
}
